// 原内联脚本的内容
function initChart() {
    // 验证echarts和echarts-gl是否加载成功
    console.log("echarts是否加载：", typeof echarts !== "undefined");
    // console.log("echarts-gl是否加载：", typeof echarts.gl !== "undefined");

    // 获取容器
    const container = document.getElementById("chart-container");
    // 初始化echarts实例
    const chart = echarts.init(container);

    // 3D散点图配置
    // const option = {
    //     xAxis: {
    //         type: 'category',
    //         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    //     },
    //     yAxis: {
    //         type: 'value'
    //     },
    //     series: [
    //         {
    //             data: [150, 230, 224, 218, 135, 147, 260],
    //             type: 'line'
    //         }
    //     ]
    // };

    const pieData = [
        { name: '直接访问', value: 335 },
        { name: '邮件营销', value: 310 },
        { name: '联盟广告', value: 234 },
        { name: '视频广告', value: 135 },
        { name: '搜索引擎', value: 1548 }
    ];

    /**
     * 生成 ECharts 3D 饼图/环形图的配置项
     * @param {Object} config - 配置参数对象
     * @param {Array} config.pieData - 饼图原始数据，格式：[{name: 名称, value: 数值, itemStyle?: {color: 颜色, opacity: 透明度}}]
     * @param {Array} config.colorList - 颜色列表（默认提供4种常用颜色）
     * @param {number} config.ringRatio - 环形空心占比（0-1，0=饼图，1=全空心，默认0.5）
     * @param {number} config.distance - 视角到3D主体的距离（值越小视角越近，默认300）
     * @param {number} config.alpha - 3D视图初始旋转角度（单位：度，默认45）
     * @param {number} config.pieHeight - 3D扇区的高度（单位：px，默认20）
     * @param {boolean} config.isUnifyHeight - 是否统一扇区高度（false按数据比例，true固定高度，默认false）
     * @param {number} config.opacity - 扇区默认透明度（0-1]，默认1）
     * @param {number|string} config.gridTop - 3D网格区域顶部偏移（支持px/%，默认0）
     * @param {number|string} config.gridLeft - 3D网格区域左侧偏移（支持px/%，默认-50）
     * @returns {Object} ECharts 完整配置项
     */
    const getPie3D = (config = {}) => {
        // 1. 解析配置参数，设置完整默认值
        const {
            pieData = [],
            colorList = ['#38dff1', '#ff960d', '#fff121', '#83ff3a'], // 默认4种颜色
            ringRatio = 0.5,
            distance = 300,
            alpha = 45,
            pieHeight = 20,
            isUnifyHeight = false,
            opacity = 1,
            gridTop = 0,
            gridLeft = -50
        } = config;
        // 2. 对数据排序（创建副本避免修改外部传入的pieData，原逻辑：按数值降序）
        const sortedPieData = [...pieData].sort((a, b) => b.value - a.value);

        // 3. 存储所有3D扇区的series配置
        const seriesList = sortedPieData.map((item, index) => {
            // 3.1 基础系列配置（surface类型实现3D扇区）
            const seriesItem = {
                name: item.name || `未命名扇区${index + 1}`,// 扇区名称（默认兜底）
                type: 'surface',// 3D曲面类型（核心）
                parametric: true,// 开启参数化模式（用于生成自定义曲面）
                wireframe: {//网格线
                    show: false//隐藏（避免影响3D视觉）
                },
                pieData: item,// 挂载原始扇区数据（后续交互用）
                // 扇区状态（选中/悬停/环形比例，初始默认值）
                pieStatus: {
                    isSelected: false,//选中
                    isHovered: false,//悬停
                    isUnifyHeight: isUnifyHeight,
                    ringRatio: ringRatio//环形比例
                },
                // 注意：surface类型系列不支持center控制位置，3D位置由grid3D.top/left控制
                // center: ['10%', '50%'] //更改圆环位置失效
            }

            // 3.2 处理扇区自定义样式（优先级：sectorData.itemStyle > 默认值）
            seriesItem.itemStyle = {
                color: colorList[index%colorList.length-1], // 默认颜色
                opacity: opacity,  // 默认透明度（使用用户传入的opacity参数）
                ...item.itemStyle
            };

            return seriesItem
        })

        // 4. 为每个扇区生成参数方程（控制3D形状），并补充图例数据
        let startValue = 0 // 当前扇区的起始累计值
        const totalValue = sortedPieData.reduce((acc, item) => acc + item.value, 0);//计算数据累加和
        seriesList.forEach((seriesItem) => {
            const { pieData, pieStatus } = seriesItem;
            const endValue = startValue + pieData.value;

            // 4.1 记录扇区的起始/结束占比（用于参数方程）
            pieData.startRatio = startValue / totalValue;
            pieData.endRatio = endValue / totalValue;
            // 4.2 生成3D曲面参数方程（核心：控制扇区的形状、选中偏移、悬停放大）
            seriesItem.parametricEquation = getParametricEquation(
                pieData.startRatio,
                pieData.endRatio,
                pieStatus.isSelected,
                pieStatus.isHovered,
                pieStatus.ringRatio,
                pieStatus.isUnifyHeight ? pieHeight : pieData.value,
            );

            // 更新下一个扇区的起始累计值
            startValue = endValue;
        });

        // 5. 补充图例数据（含百分比格式化）
        const legendData =seriesList.map(item=>{
            const { pieData} = item;
            const ratio = calcValue(pieData.value / totalValue, 4);
            return {
                name:item.name,
                value:ratio
            }
        })

        // 计算3D盒子高度（保证高度协调）
        const boxHeight = getHeight3D(seriesList, pieHeight);

        // 6. 组装最终ECharts配置项
        const option = {
            legend: {// 图例组件配置
                show: true,
                data: legendData,
                orient: 'vertical',// 垂直排列
                right: 10,// 右对齐
                top: 30,// 顶部偏移
                itemGap: 30,// 图例项间距
                itemHeight: 5,// 图例标记高度
                itemWidth: 5,// 图例标记宽度
                textStyle: {// 文字样式
                    color: '#d4d6d9',
                    fontSize: 14
                },
                icon: 'roundRect',// 图例标记形状（圆角矩形）
                formatter: (legendName) =>  {// 图例格式化（显示名称+百分比）
                    const item = legendData.find(item => item.name === legendName)
                    const percentage = calcValue(item.value * 100, 2)
                    return `${legendName}  ${percentage}%`
                }
            },
            labelLine: {
                show: true,
                lineStyle: {
                    color: '#fff'
                }
            },
            label: {
                show: true,
                position: 'outside',// 标签在扇区外侧
                formatter: '{b} \n{c} {d}%'// 标签内容：名称+数值+百分比
            },
            tooltip: {
                backgroundColor: '#033b77',// 提示框背景
                borderColor: '#21f2c4',// 提示框边框
                textStyle: {// 提示框文字
                    color: '#fff',
                    fontSize: 13
                },
                formatter: (params) => {// 提示框内容格式化（显示名称+占比）
                    // 排除无效系列（如辅助线系列）
                    if (params.seriesName === 'mouseoutSeries' || params.seriesName === 'pie2d') {
                        return '';
                    }

                    const targetItem = seriesList[params.seriesIndex];
                    const percentage = calcValue((targetItem.pieData.endRatio - targetItem.pieData.startRatio) * 100,2 );
                    return `${params.seriesName}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span> ${percentage}%`;
                }
            },
            // 3D坐标轴配置（固定范围，避免显示异常）
            xAxis3D: { min: -1, max: 1 },
            yAxis3D: { min: -1, max: 1 },
            zAxis3D: { min: -1, max: 1 },
            grid3D: {
                show: false,// 隐藏3D网格（仅用其控制位置和大小）
                top: gridTop,// 3D区域顶部偏移（用户可配置）
                left: gridLeft,// 3D区域左侧偏移（用户可配置）
                boxHeight: boxHeight, // 3D盒子高度（控制扇区立体高度）
                viewControl: {
                    // 3d效果可以放大、旋转等，请自己去查看官方配置
                    alpha, // 角度
                    distance, // 调整视角到主体的距离，类似调整zoom
                    rotateSensitivity: 1, // 旋转灵敏度（0=不可旋转）
                    zoomSensitivity: 0, // 缩放灵敏度（0=不可缩放）
                    panSensitivity: 0, // 平移灵敏度（0=不可平移）
                    autoRotate: true // 自动旋转
                }
            },
            series: seriesList // 最终的3D扇区系列列表
        }
        return option
    }

    /**
     * 生成3D扇区的曲面参数方程（核心：控制扇区的形状、选中偏移、悬停放大）
     * @param {number} startRatio - 扇区起始占比（0-1，相对于总数值）
     * @param {number} endRatio - 扇区结束占比（0-1，相对于总数值）
     * @param {boolean} isSelected - 扇区是否选中（选中时向外偏移）
     * @param {boolean} isHovered - 扇区是否悬停（悬停时放大）
     * @param {number} ringRatio - 环形空心占比（0-1）
     * @param {number} sectorHeight - 扇区高度（含悬停偏移）
     * @returns {Object} 曲面参数方程（u/v参数范围 + x/y/z坐标计算）
     */
    const getParametricEquation = (
        startRatio,
        endRatio,
        isSelected,
        isHovered,
        ringRatio,
        sectorHeight
    ) => {
        // 1. 计算扇区的角度（占比转弧度，Math.PI*2=360度）
        const midRatio = (startRatio + endRatio) / 2// 扇区中间占比
        // 将比例转换为弧度
        const startRadian = startRatio * Math.PI * 2// 起始角度（弧度）
        const endRadian = endRatio * Math.PI * 2// 结束角度（弧度）
        const midRadian = midRatio * Math.PI * 2// 中间角度（弧度）

        // 2. 特殊处理：如果只有一个扇区，取消选中效果
        if (startRatio === 0 && endRatio === 1) {
            isSelected = false
        }

        // 选中时的偏移量（沿扇区中线方向）
        const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0
        const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0

        // 悬停时的缩放比例
        const hoverScale = isHovered ? 1.05 : 1

        // 返回曲面参数方程（u/v控制曲面生成，x/y/z控制每个点的坐标）
        return {
            // u参数：控制扇区的角度范围（-π 到 3π，覆盖完整360度+冗余，避免缝隙）
            u: { min: -Math.PI, max: Math.PI * 3, step: Math.PI / 32 },
            // v参数：控制扇区的径向（0到2π，生成环形曲面）
            v: { min: 0, max: Math.PI * 2, step: Math.PI / 20 },
            // x坐标：控制水平方向位置
            x: (u, v) => {
                if (u < startRadian) return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * ringRatio) * hoverScale;
                if (u > endRadian) return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * ringRatio) * hoverScale;
                return offsetX + Math.cos(u) * (1 + Math.cos(v) * ringRatio) * hoverScale;
            },
            // y坐标：控制垂直方向位置
            y: (u, v) => {
                if (u < startRadian) return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * ringRatio) * hoverScale;
                if (u > endRadian) return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * ringRatio) * hoverScale;
                return offsetY + Math.sin(u) * (1 + Math.cos(v) * ringRatio) * hoverScale;
            },
            // z坐标：控制3D深度（高度）
            z: (u, v) => {
                if (u < -Math.PI * 0.5) return Math.sin(u); // 左侧冗余区域高度
                if (u > Math.PI * 2.5) return Math.sin(u) * sectorHeight * 0.1; // 右侧冗余区域高度
                return Math.sin(v) > 0 ? sectorHeight * 0.1 : -1; // 核心扇区高度（上半部分高，下半部分低，形成立体）
            }
        }
    }

    /**
     * 计算3D饼图的盒子高度（按最大扇区数值比例，保证高度协调）
     * @param {Array} seriesList - 扇区系列列表（由getPie3D生成）
     * @param {number} targetSectorHeight - 目标扇区高度（用户配置的基础高度）
     * @returns {number} 计算后的3D盒子高度
     */
    const getHeight3D = (seriesList, targetSectorHeight) => {
        // 按扇区数值降序排序，取最大数值计算比例
        const sortedSeries = [...seriesList].sort((a, b) => b.pieData.value - a.pieData.value);
        const maxSectorValue = sortedSeries[0].pieData.value;
        // 按最大数值比例计算盒子高度（25为经验系数，保证高度适中）
        return (targetSectorHeight * 25) / maxSectorValue;
    };

    /**
     * 格式化数值（保留指定小数位数，无效值返回'-'）
     * @param {number} value - 待格式化的数值
     * @param {number} toFix - 保留的小数位数（对应toFixed参数）
     * @returns {string} 格式化后的字符串
     */
    const calcValue = (value, toFix) => {
        const num = Number(value);
        // 非数字返回'-'，否则保留指定小数位数
        return isNaN(num) ? '-' : num.toFixed(toFix);
    };

    const option = getPie3D({
        pieData:pieData,           // 饼图数据
        ringRatio: 0.5,               // 环的内径是外径的一半
        distance:300,               // 相机距离图表100个单位
        alpha:45,                // 图表沿x个轴旋转45度
        pieHeight:80,                // 3D环状图的高度为50像素
        isUnifyHeight:true,          //是否统一高度
        opacity:0.8,                // 饼图或环的透明度为80%
        gridTop:0,                // 更改3d圆环位置
        gridLeft:-50                // 更改3d圆环位置
    });

    chart.setOption(option);
}

// 页面加载完成后初始化图表
// window.onload = initChart;

function checkWebGLInExtension() {
    const canvas = document.createElement('canvas');
    const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
    if (!gl) {
        console.error('扩展环境中WebGL不可用！');
        return false;
    }
    console.log('扩展环境中WebGL可用，版本：', gl.getParameter(gl.VERSION));
    return true;
}

// 在initChart前调用
window.onload = () => {
    if (checkWebGLInExtension()) {
        initChart();
    }
};